<template>
    <div class="specParamsBox">
        <template v-if="showType"> 
            <div class="infoItem" v-if="detail.specs && detail.specs.length>0">
                <label v-t="'goods.text1'">Specs</label>
                <div class="valtxt">
                <p>{{orderInfo.specs.specName?(orderInfo.specs.specGroupName+"/"+orderInfo.specs.specName):'Please Select'}}</p> 
                </div>
                <i class="iconfont icon-jiantouyou" @click="showFlag1=true"></i>
                <spec-select v-if="showFlag1" @close="showFlag1=false"/>
            </div>
            <div class="infoItem">
                <label v-t="'goods.text2'">Deliver Goods</label>
                <div class="valtxt" v-if="detail.apiShopDetailDto">
                <p>
                    <template v-if="detail.apiShopDetailDto.logisticsDeliveryStatus==1"> 
                            <span v-t="'goods.text3'">Spot, delivery within 48 hours after payment;</span>
                        </template>
                    <template v-if="detail.apiShopDetailDto.logisticsSelfStatus==1">
                            
                            <span v-t="'goods.text4'">Pick up place:</span>
                            <template v-for="dt in detail.apiShopDetailDto.selfDeliverys" :key="dt.address">{{dt.address}},</template>
                    </template>
                    </p> 
                </div>
            </div>
            <div class="infoItem">
                <label v-t="'goods.text5'">Freight</label>
                <div class="valtxt">
                <p v-t="'goods.text6'">Free / charged according to your receiving area</p> 
                </div>
            </div>
            <div class="infoItem" v-if="goodsParams.length>0">
                <label  v-t="'goods.text7'">Parameter</label>
                <div class="valtxt">
                    <p class="slh">
                        <template v-for="(dt,i) in goodsParams" :key="dt">
                            {{dt.paramName}} / {{dt.paramValue}}
                            <template v-if="i<goodsParams.length-1">，</template>
                        </template>
                    </p>
                <!-- <p>{{orderInfo.params.paramName?(orderInfo.params.paramName+" / "+orderInfo.params.paramValue):'Make / model'}}</p>  -->
                </div>
                <i class="iconfont icon-jiantouyou" @click="showFlag2=true"></i>
                <parmas-select v-if="showFlag2" @close="showFlag2=false"/>
            </div>
        </template>
        <div class="infoItem" :class="{'topline':!showType}" v-if="couponList.length>0"> 
            <label v-t="'goods.text8'">Coupon</label>
            <div class="valtxt">
                <p class="slh">
                     {{onCoupon.couponAmount?.decimalTwoString}} / {{onCoupon.minAmount?.decimalTwoString}}
                </p>
               <!-- <p>{{orderInfo.params.paramName?(orderInfo.params.paramName+" / "+orderInfo.params.paramValue):'Make / model'}}</p>  -->
            </div>
            <i class="iconfont icon-jiantouyou" @click="showFlag3=true"></i>
            <couponSelect v-if="showFlag3" @change="changeList" :list="couponList" @close="showFlag3=false"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted,watch} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import specSelect from './specSelect.vue'
import parmasSelect from './parmasSelect.vue'
import couponSelect from './couponSelect.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       specSelect,
       parmasSelect,
       couponSelect
    },
    props:{
         amount2:{
            type:Number,
            default(){
                return 0
            }
         },
          showType:{
            type:Boolean,
            default(){
                return true
            }
         }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            showFlag1:false,
            showFlag2:false,
            showFlag3:false,
            detail:computed(()=>store.state.shop.detail),
            userInfo:computed(()=>store.state.base.userInfo),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            goodsParams:[],
            couponList:[],
            onCoupon:null
        })

        watch(()=>props.amount2,(n,o)=>{
            couponListUser()
        })

        onMounted(()=>{
           if(props.showType){
                    for(let i=0;i<state.detail.params.length;i++){
                        const item = state.detail.params[i]
                        if(item.paramName  && item.paramValue){
                            state.goodsParams.push(item)
                        } 
                    }
                   }
            couponListUser()
        })
       const couponListUser =()=>{
            store.dispatch('shop/couponListUser',{
                  "limit": 20,
                    "orderField": "",
                    "orderType": "",
                    "page": 1,
                    "totalAmount":props.amount2+''||'0',
                    shopId:state.detail.apiShopDetailDto.shopId,
                 walletAddress:state.userInfo.walletAddress
                 }).then((res)=>{
                 if(res.success){
                   state.couponList = res.data ||[]
                   if(state.couponList.length>0){
                       state.onCoupon = state.couponList[0]
                      context.emit('changeCoupon', state.onCoupon)
                   }else{
                      context.emit('changeCoupon', {shopCouponId:null})
                   }
                 }
             })
        }
         const changeList = (item)=>{
           state.onCoupon =item
           state.showFlag3 = false
            context.emit('changeCoupon', item)
        }
        
        return{
            ...toRefs(state),
            changeList,
            couponListUser
        }
    }
}
</script>

<style lang="scss" scoped>
    .infoItem{
            display: flex;
            height: 85px;
            background: rgba(103,248,255,0.2000);
            align-items:center;
            padding: 0 20px 0 30px;
            color: #fff;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            border: 1px solid rgba(103,248,255,0.5000);
            font-size: 24px;
            &+.infoItem{
                margin-top: 15px;
            }
            label{
                width: 250px;
                border-right: 6px solid #5ADBED;
                flex-shrink: 0;
            }
            .valtxt{
                flex: 1;
                text-align: left;
                padding: 0 0 0 20px;
                width: 0;
                flex-shrink: 0;
                &.valtxt2{
                    width: 280px;
                }
                p{
                    color: #fff;
                    line-height: 30px;
                    overflow: hidden;
                    &.slh{
                        width: 100%;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                em{
                    font-family: Inter-Medium, Inter;
                    font-weight: 600;
                    font-style: normal;
                    color: #CBFAFF;
                }
            }
            i{
                flex-shrink: 0;
                color: #64D5EC;
            }
        }
        .topline{
            margin-top:10px;
        }
</style>